<template>
	<view class="page">
		<!-- 头部背景图 -->
		<view class="pageTopImg" :style="'height:' + touHeight +'px;'"></view>
		<!-- 顶部菜单 -->
		<view class="topHeader" :style="'height:' + touHeight +'px;'">
			<view class="fanhuiUp" @tap="toFanhuiUp"></view>
			<view class="pageTitle">筛选人员</view>
		</view>
		<view class="shuaixuan_top" :style="'top:' + touHeight +'px;'">
			<view class="shuaixuan_left">
				<view class="batch_caozuo" :class="{'active':batch==2}" @tap="batchBtn">{{piliang_text}}</view>
			</view>
			<view class="grade_paixu" :class="{'active':grade==2}" @tap="gradePaixu">按等级排序</view>
		</view>
		<view class="page_content" :style="'padding-top:' + pageTop + 'px'">
			<view class="personnel_box">
				<view class="personnel_list" :class="{'active':batch==1}" v-for="(item,index) in productList">
					<view class="xuanze" :class="item.sss==2?'active':''+item.order_status==2||item.order_status==7?'prohibit':''" @tap="onXuanze" :data-key="index"></view>
					<view class="renyuan_box" @tap='toRenyuanziliao' :data-userId="item.user_id" :data-hotelId="item.hotel_id" :data-orderId="item.order_id">
						<view class="touxiang" :style="'background: url('+item.avatar+') center center no-repeat;'"></view>
						<view class="neirong">
							<view class="name">{{item.username}}<view class="shang">在我店上岗{{item.count}}次</view></view>
							<view class="text_box">
								<view class="old">{{item.age}}岁</view>
								<view class="gender" :class="item.gender === 1 ? 'nan' : 'nv'"></view>
								<view class="jibie">{{item.level_text}}</view>
							</view>
						</view>
					</view>
					<view class="right_buttom">
						<view class="anniu_btn anniu_btn01" v-if="item.order_status==2"><image :src="URL+'/JD_wx_img/renyuan_btn_img01.png'" mode="widthFix"></image>已通过</view>
						<view class="anniu_btn anniu_btn02" v-if="item.order_status==7"><image :src="URL+'/JD_wx_img/renyuan_btn_img02.png'" mode="widthFix"></image>已拒绝</view>
						<view class="jujue" v-if="item.order_status==1" :data-id="item.order_id" :data-key="index" @tap="caozuoJujue"><image :src="URL+'/JD_wx_img/renyuan_btn_img02.png'" mode="widthFix"></image>拒绝</view>
						<view class="tonguo" v-if="item.order_status==1" :data-id="item.order_id" :data-key="index" @tap="caozuoTongguo"><image :src="URL+'/JD_wx_img/renyuan_btn_img03.png'" mode="widthFix"></image>通过</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 公共底部按钮 -->
		<view class="public_bottom_caozuo" :class="{'active':batch==1}">
			<view class="public_buttom public_buttom01" @tap="yijianAll"><image :src="URL+'/JD_wx_img/renyuan_btn_big_img03.png'" mode="widthFix"></image>一键全部通过</view>
			<view class="xuanze" @tap="onQuanxuan" :class="quanxuan==2?'active':''">全选</view>
			<div class="public_buttom_right">
				<view class="public_buttom public_buttom02" @tap="caozuoJujueAll"><image :src="URL+'/JD_wx_img/renyuan_btn_img02.png'" mode="widthFix"></image>批量拒绝</view>
				<view class="public_buttom public_buttom01" @tap="caozuoTongguoAll" style="margin-left: 10rpx;"><image :src="URL+'/JD_wx_img/renyuan_btn_img03.png'" mode="widthFix"></image>批量通过</view>
			</div>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				//域名拼接
				URL: app.globalData.URL,
				touHeight: 0,
				pageTop: 0,
				batch: 2,
				grade: 2,
				piliang_text: '批量操作',
				//用于渲染页面的数组
				productList: [],
				quanxuan:1,//全选默认状态
			}
		},
		onShow(options){
			var that = this;
			//自定义头部高度
			app.customNav()
			that.touHeight = app.touHeight + 5//搜索栏距离顶部高度
			var query = wx.createSelectorQuery();
			query.select('.shuaixuan_top').boundingClientRect()
			query.exec(function (res) {
				that.pageTop = that.touHeight + res[0].height
			})

			//onshow取值方法
			// 获取当前小程序的页面栈
			var pages = getCurrentPages();
			// 数组中索引最大的页面--当前页面
			var currentPage = pages[pages.length-1];
			
			//兼职ID
			that.id = currentPage.options.id;
			//默认加载数据
			var id = that.id;//兼职ID
			var order = that.grade;//排序：1=等级由高到低，2=等级由低到高
			that.getproinfo(id,order,that)
		},
		methods: {
			//返回上一级
			toFanhuiUp:function(){
				uni.navigateBack({
				    delta: 1
				})
			},
			
			//拒绝
			caozuoJujue(e){
				var that = this;
				var order_id = e.currentTarget.dataset.id;//用户id
				var key = e.currentTarget.dataset.key;
				//改变到岗状态
				var daogangList = that.productList;
				daogangList[key].order_status = 7;//确定到岗状态
				uni.request({
					url: app.globalData.URL + '/api/v1/Hotel/choiceUser?order_id='+order_id+'&action=2',
					method: 'get',
					header:{
						token: uni.getStorageSync('token')
					},
					success: function (res) {
						that.quanxuan = 1;//取消
						//加载数据
						var productList = [];
						var id = that.id;//兼职ID
						var order = that.grade;//排序：1=等级由高到低，2=等级由低到高
						that.getproinfo(id,order,that)
					}
				});
			},
			//同意
			caozuoTongguo(e){
				var that = this;
				var order_id = e.currentTarget.dataset.id;//用户id
				var key = e.currentTarget.dataset.key;
				//改变到岗状态
				var daogangList = that.productList;
				daogangList[key].order_status = 2;//确定到岗状态
				uni.request({
					url: app.globalData.URL + '/api/v1/Hotel/choiceUser?order_id='+order_id+'&action=1',
					method: 'get',
					header:{
						token: uni.getStorageSync('token')
					},
					success: function (res) {
						that.quanxuan = 1;//取消
						//加载数据
						var productList = [];
						var id = that.id;//兼职ID
						var order = that.grade;//排序：1=等级由高到低，2=等级由低到高
						that.getproinfo(id,order,that)
					}
				});
			},
			//全部拒绝
			caozuoJujueAll(e){
				var that = this;
				var daogangList = that.productList;
				var order_id = daogangList.map(item => {
				    return item.order_status == 1 ? item.order_id : false
				}).filter(item => item)
				if(that.order_id==undefined){
					uni.showModal({
						title: '提示',
						content: '请先选择操作人员',
						showCancel: false,
						confirmColor:'#E85426',
					})	
				}else{
					if(order_id.length==0){
						uni.showModal({
							title: '提示',
							content: '人员已经全部操作完，无需再操作',
							showCancel: false,
							confirmColor:'#E85426',
						})
					}else{
						uni.showModal({
							title: '提示',
							content: '确定通过筛选吗？',
							showCancel: true,
							confirmColor:'#E85426',
							success(res){
								if(res.confirm){
									uni.request({
										url: app.globalData.URL + '/api/v1/Hotel/choiceUser?order_id='+order_id+'&action=2',
										method: "get",
										header:{
											token: uni.getStorageSync('token')
										},
										success: function (res) {
											if(res.data.code==0){
												uni.showModal({
													title: '提示',
													content: res.data.msg,
													showCancel: false,
													confirmColor:'#E85426',
												})	
											}else{
												wx.showToast({
													title: res.data.msg,
													icon: 'success',
													duration: 1000
												})
												that.quanxuan = 1;//取消
												//加载数据
												var productList = [];
												var id = that.id;//兼职ID
												var order = that.grade;//排序：1=等级由高到低，2=等级由低到高
												that.getproinfo(id,order,that)
											}
										}
									})
								}
							}
						})
					}
				}
			},
			//全部同意
			caozuoTongguoAll(e){
				var that = this;
				var daogangList = that.productList;
				var order_id = daogangList.map(item => {
				    return item.order_status == 1 ? item.order_id : false
				}).filter(item => item)
				if(that.order_id==undefined){
					uni.showModal({
						title: '提示',
						content: '请先选择操作人员',
						showCancel: false,
						confirmColor:'#E85426',
					})	
				}else{
					if(order_id.length==0){
						uni.showModal({
							title: '提示',
							content: '人员已经全部操作完，无需再操作',
							showCancel: false,
							confirmColor:'#E85426',
						})
					}else{
						uni.showModal({
							title: '提示',
							content: '确定通过筛选吗？',
							showCancel: true,
							confirmColor:'#E85426',
							success(res){
								if(res.confirm){
									uni.request({
										url: app.globalData.URL + '/api/v1/Hotel/choiceUser?order_id='+order_id+'&action=1',
										method: "get",
										header:{
											token: uni.getStorageSync('token')
										},
										success: function (res) {
											if(res.data.code==0){
												uni.showModal({
													title: '提示',
													content: res.data.msg,
													showCancel: false,
													confirmColor:'#E85426',
												})	
											}else{
												wx.showToast({
													title: res.data.msg,
													icon: 'success',
													duration: 1000
												})
												that.quanxuan = 1;//取消
												//加载数据
												var productList = [];
												var id = that.id;//兼职ID
												var order = that.grade;//排序：1=等级由高到低，2=等级由低到高
												that.getproinfo(id,order,that)
											}
										}
									})
								}
							}
						})
					}
				}
			},
			//单选
			onXuanze(e){
				var that = this;
				var order_id = [];
				var key = e.currentTarget.dataset.key;
				//改变复选框单
				var daogangList = that.productList;
				if(daogangList[key].sss==1){
					daogangList[key].sss = 2;//确定选中
				}else{
					daogangList[key].sss = 1;
				}
				//判断是否全选
				let select = 0
				let select_all = 0
				for(let i of daogangList){
					if(i.sss == 2){
						order_id.push(i.order_id)
						select++
					}
					if(i.order_status == 1){
						select_all++
					}
				}
				if(select == select_all){
					that.quanxuan = 2
				}else{
					that.quanxuan = 1
				}
				that.order_id = order_id;
				console.log(that.order_id)
			},
			//全选
			onQuanxuan(e){
				var that = this;
				var order_id = [];
				//改变复选框单
				var daogangList = that.productList;
				if(that.quanxuan==1){//确定全部
					that.quanxuan = 2;//全选按钮
					order_id = daogangList.map(item => {
					    return item.order_status == 1 ? item.order_id : false
					}).filter(item => item)
					//选中单选状态
					for(let i of daogangList){
						if(i.order_status == 1){
							i.sss = 2
						}
					}
				}else{//确定取消
					that.quanxuan = 1;//全选按钮
					//取消单选状态
					for(let i of daogangList){
						if(i.order_status == 1){
							i.sss = 1
						}
					}
					order_id = [];
				}
				that.order_id = order_id;
				console.log(that.order_id)
			},
			//一键全部到岗
			yijianAll(){
				var that = this;
				var order_id = [];
				var daogangList = that.productList;
				order_id = daogangList.map(item => {
				    return item.order_status == 1 ? item.order_id : false
				}).filter(item => item)
				if(order_id.length==0){
					uni.showModal({
						title: '提示',
						content: '人员已经全部操作完，无需再操作',
						showCancel: false,
						confirmColor:'#E85426',
					})	
				}else{
					uni.showModal({
						title: '提示',
						content: '确定通过筛选吗？',
						showCancel: true,
						confirmColor:'#E85426',
						success(res){
							if(res.confirm){
								uni.request({
									url: app.globalData.URL + '/api/v1/Hotel/choiceUser?order_id='+order_id+'&action=1',
									method: "get",
									header:{
										token: uni.getStorageSync('token')
									},
									success: function (res) {
										if(res.data.code==0){
											uni.showModal({
												title: '提示',
												content: res.data.msg,
												showCancel: false,
												confirmColor:'#E85426',
											})	
										}else{
											wx.showToast({
												title: res.data.msg,
												icon: 'success',
												duration: 1000
											})
											that.quanxuan = 1;//取消
											//加载数据
											var productList = [];
											var id = that.id;//兼职ID
											var order = that.grade;//排序：1=等级由高到低，2=等级由低到高
											that.getproinfo(id,order,that)
										}
									}
								})
							}
						}
					})
				}
			},
			
			//排序
			gradePaixu(){
				var that = this;
				if(that.grade==1){
					that.grade = 2;
				}else{
					that.grade = 1
				}
				that.productList = [];//清空数组
				var id = that.id;//兼职ID
				var order = that.grade;//排序：1=等级由高到低，2=等级由低到高
				that.getproinfo(id,order,that)
			},
			
			//是否展开批量操作
			batchBtn(){
				var that = this;
				if(that.batch==1){
					that.batch = 2
					that.piliang_text = '批量操作'
				}else{
					that.batch = 1
					that.piliang_text = '退出批量操作'
				}
			},
			
			//跳转到人员介绍
			toRenyuanziliao(e){
				var that = this;
				var user_id = e.currentTarget.dataset.userid;//用户id
				var hotel_id = e.currentTarget.dataset.userid;//酒店id
				var order_id = e.currentTarget.dataset.orderid;//订单id
				uni.navigateTo({
				    url: 'renyuan_ziliao/renyuan_ziliao?user_id='+user_id+'&hotel_id='+hotel_id+'&order_id='+order_id,
				});
			},
			
			//确认到岗列表
			getproinfo(id,order,that){
				var that = this;
			    uni.request({
					url: app.globalData.URL + '/api/v1/Hotel/choiceList?id='+id+'&order='+order,
					method: 'get',
					header:{
						token: uni.getStorageSync('token')
					},
					success: function (res) {
						that.productList = res.data.data;
					}
				});
			}
			
			
		}
	}
</script>

<style>
	.jujue{
		font-size: 20rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
		background: #FFFFFF;
		box-shadow: 0px 8rpx 20rpx rgba(169, 63, 28, 0.1);
		color: #F02A2A;
		box-sizing: border-box;
		padding-top: 10rpx;
		display: inline-block;
	}
	.jujue image{
		width: 32rpx;
		display: block;
		margin: 0px auto;
	}
	.tonguo{
		font-size: 20rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
		background: #19C769;
		box-shadow: 0px 8rpx 20rpx rgba(169, 63, 28, 0.1);
		color: #fff;
		box-sizing: border-box;
		padding-top: 10rpx;
		display: inline-block;
		margin-left: 20rpx;
	}
	.tonguo image{
		width: 32rpx;
		display: block;
		margin: 0px auto;
	}
	.public_buttom_right .public_buttom{
		display: inline-block!important;
	}
	.renyuan_box .neirong .text_box .gender{
		margin: 0px 10rpx;
	}
</style>
